<template>
  <div>
    <div class="cont">
      <!-- 搜索 -->
      <div class="search">
        <input v-model="ele" type="text" placeholder="终端编号/终端名称" />
        <el-button @click="search()">搜索</el-button>
      </div>
      <!-- 下方按钮 -->
      <div class="top">
        <button @click="dialogFormVisible1 = true">新增</button>
        <button @click="(dialogFormVisible2 = true), diangua()" :disabled='disabled' :style="{'background-color':color,'border-color':border}">挂接</button>
        <button @click="open()" :disabled='disabled' :style="{'background-color':color,'border-color':border}">删除</button>
      </div>
      <!-- 下方表格 -->
      <div class="down">
        <el-table
          ref="multipleTable"
          :data="tableData3"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="terminal.terminalId" label="终端编号" align="center">
          </el-table-column>
          <el-table-column prop="terminalName" label="终端名称" align="center">
          </el-table-column>
          <el-table-column
            prop="terminal.model"
            label="型号"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="terminal.protocol"
            label="通信规约"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="terminal.companyType"
            label="厂家"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="terminal.gather"
            label="采集方式"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="terminal.batchNumber"
            label="批次号"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="installAddr"
            label="安装地址"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column prop="simCard" label="SIM卡号" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column
            prop="ammeterNumber"
            label="接表数量"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
        </el-table>
        <!-- 添加弹窗 -->
        <div class="add">
          <el-dialog title="新增" :visible.sync="dialogFormVisible1" width="70%">
            <div class="box">
              <div class="left">
                <div class="title">查询终端</div>
                <hr />
                <input
                  v-model="ele1"
                  type="text"
                  placeholder="请输入终端编号"
                />
                <button @click="addgather()">搜索</button>
                <el-table
                  :data="tableData2"
                  style="width: 100%"
                  @selection-change="handleSelectionChange1"
                  ref="multipleTable"
                >
                  <el-table-column type="selection"> </el-table-column><!-- **************未解决单选框 -->
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                      >
                        <el-form-item label="型号">
                          <span>{{ props.row.model }}</span>
                        </el-form-item>
                        <el-form-item label="通信规约">
                          <span>{{ props.row.protocol }}</span>
                        </el-form-item>
                        <el-form-item label="采集方式">
                          <span>{{ props.row.gather }}</span>
                        </el-form-item>
                        <el-form-item label="批次号">
                          <span>{{ props.row.batchNumber }}</span>
                        </el-form-item>
                      </el-form>
                    </template>
                  </el-table-column>
                  <el-table-column label="终端编号" prop="terminalId">
                  </el-table-column>
                </el-table>
                
              </div>
              <div class="right">
                <div class="title">新增内容</div>
                <hr />
                <!-- <div class="show">从左侧拖动电表到此处</div> -->
                <div>
                  终端名称<input type="text" v-model="eleone">
                </div>
                <div>
                  SIM卡号<input type="text" v-model="eletwo">
                </div>
                <div>
                  安装地址<input type="text" v-model="elethree">
                </div>
                
              </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="(dialogFormVisible1 = false),send()"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30, 40]"
            :page-size="sizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <!-- 挂接弹窗 -->
        <div class="gua">
          <el-dialog
            title="挂接"
            :visible.sync="dialogFormVisible2"
            width="70%"
          >
            <div class="box">
              <div class="left">
                <div class="title">查询电表</div>
                <hr />
                <el-table
                  :data="datas"
                  style="width: 100%"
                  @selection-change="handleSelectionChange1"
                  ref="multipleTable"
                >
                  <el-table-column type="selection"> </el-table-column>
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                      >
                        <el-form-item label="电表类型 :">
                          <span>{{ props.row.connection }}</span>
                        </el-form-item>
                        <el-form-item label="厂家 :">
                          <span>{{ props.row.companyType }}</span>
                        </el-form-item>
                        <el-form-item label="通讯方式 :">
                          <span>{{ props.row.message }}</span>
                        </el-form-item>
                        <el-form-item label="规约 :">
                          <span>{{ props.row.protocols }}</span>
                        </el-form-item>
                        <el-form-item label="ID :">
                          <span>{{ props.row.ammeterId }}</span>
                        </el-form-item>
                      </el-form>
                    </template>
                  </el-table-column>
                  <el-table-column label="终端编号" prop="ammeterId">
                  </el-table-column>
                </el-table>
              </div>
              <div class="right">
                <div class="title">已挂电表</div>
                <hr />
                <el-table :data="tableData1" style="width: 100%">
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                      >
                        <el-form-item label="电表类型">
                          <span>{{ props.row.connection }}</span>
                        </el-form-item>
                        <el-form-item label="厂家">
                          <span>{{ props.row.companyType }}</span>
                        </el-form-item>
                        <el-form-item label="通讯方式">
                          <span>{{ props.row.message }}</span>
                        </el-form-item>
                        <el-form-item label="规约">
                          <span>{{ props.row.protocols }}</span>
                        </el-form-item>
                        <el-form-item label="ID">
                          <span>{{ props.row.ammeterId }}</span>
                        </el-form-item>
                      </el-form>
                    </template>
                  </el-table-column>
                  <el-table-column label="终端编号" prop="ammeterId">
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible2 = false">取 消</el-button>
              <el-button
                type="primary"
                @click="(dialogFormVisible2 = false), customerGua()"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  GatherApi,
  CustomerAdd,
  GatherDel,
  CustomerGua,
  AddGatherApi,
  GuaGatherApi,
  GatherMount,
  GatherMountList,
  GatherAdd,
} from "../request/api";
export default {
  data() {
    return {
      tableData3: [],
      tableData1: [],
      tableData2: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      ele: "",
      ele1: "",
      ele2: "",
      eleone:"",
      eletwo:'',
      elethree:"",
      newArr: "",
      newArr1: "",
      datas: "",
      datas1: "",
      arrnum: "",
      tableData: [],
      ids: "",
      disabled:true,
      color:'#e3e3e3',
      border:'#e3e3e3',
      currentPage: 1,
      total: 0,
      sizes: 10,
      val1: null,
      val2: null,
      numarr:'',
      ruleForm: {
        name: "",
        custAddr: "",
        custType: "",
        manageCompany: "",
        electrovalence: "",
      },
      rules: {
        name: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
        custAddr: [
          { required: true, message: "请输入用电地址", trigger: "blur" },
        ],
        custType: [
          { required: true, message: "请输入用户类型", trigger: "change" },
        ],
        manageCompany: [
          { required: true, message: "请输入管理单位", trigger: "blur" },
        ],
        electrovalence: [
          { required: true, message: "请输入电价", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList()
    this.getAddList()
    
    
    GuaGatherApi().then((res) => {
      // console.log(res);
      this.tableData = res.data.data;
    });
  },
  mounted() {
    // this.getAddList()
  },
  methods: {
    getAddList(){
      AddGatherApi().then((res) => {
      // console.log(res);
      this.tableData2 = res.data.data;
    });
    },
    getList(){
      GatherApi().then((res) => {
      // console.log(res);
      this.tableData3 = res.data.data.records;
      this.total = res.data.data.total
      if(res.data.code ==500){
        alert("登录已过期")
        this.$router.push("/")
      }
    });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          CustomerAdd({
            custName: this.ruleForm.name,
            custAddr: this.ruleForm.custAddr,
            custType: this.ruleForm.custType,
            manageCompany: this.ruleForm.manageCompany,
            electrovalence: this.ruleForm.electrovalence,
          }).then((res) => {
            // console.log(res);
          });
        } else {
          this.dialogFormVisible = true;
          return false;
        }
      });
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    handleSelectionChange(val) {
      // console.log(val);
      let newArr = val.map((item) => {
        return item.id;
      });
      console.log(newArr);
      this.numarr = newArr.toString()
      this.newArr = newArr;
      if(this.newArr.length==1){
        this.disabled = false
        this.color = 'white' 
        this.border = '#008ecb'
      }else{
        this.disabled = true
        this.color = '#e3e3e3'
        this.border = '#e3e3e3'
      }
    },
    handleGua(index, row) {
      console.log(index, row);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    search() {
      GatherApi({ terminalId: this.ele }).then((res) => {
        // console.log(res);
        this.tableData3 = res.data.data.records;
      });
    },
    del() {
      let arr2 = this.newArr;
      let arr3 = arr2.toString();
      GatherDel({ gatherId: arr3 }).then((res) => {
        this.msg(res)
        this.getList()
      });
    },
    addgather() {
      AddGatherApi({ terminalId: this.ele1 }).then((res) => {
        this.msg(res)
        this.datas1 = res.data.data;
      });
    },
    guasearch() {
      GuaGatherApi({ ammeterId: this.ele2 }).then((res) => {
        this.msg(res)
        this.tableData = res.data.data;
      });
    },
    handleSelectionChange1(val) {
      let newArr1 = val.map((item) => {
        return item.id;
      });
      let aa = newArr1.toString();
      this.ids = aa;
      this.multipleSelection = val;
    },
    customerGua() {
      GatherMount({ gatherId: this.newArr[0], ids: this.ids }).then((res) => {
        this.msg(res)
        this.getList()
      });
    },
    diangua() {
      // this.getAddList()
      GuaGatherApi({gatherId:this.numarr}).then((res) => {
      this.datas = res.data.data;
      console.log(res);
    });


      // if (this.newArr.length > 1 || this.newArr.length == 0) {
      //   // return false
      //   this.$router.go(0);
      // }
      GatherMountList({ gatherId: this.newArr[0] }).then((res) => {
        // console.log(res);
        this.tableData1 = res.data.data;
      });
    },
    send(){
      GatherAdd({terminalId:this.ids,terminalName:this.eleone,installAddr:this.elethree,simCard:this.eletwo}).then((res)=>{
        // console.log(res);
        this.msg(res)
        this.getList()
        this.getAddList()
        this.eleone=''
        this.elethree=''
        this.eletwo=''
      })
    },
    msg(res) {
      if (res.data.code == 0) {
        this.$message({
          message: res.data.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.data.msg,
          type: "error",
        });
      }
    },
    handleSizeChange(val) {
      // console.log(val);
      this.val1 = val
      GatherApi({
        currentPage: this.currentPage,
        pageSize: this.val1,
      }).then((res) => {
        console.log(res);
        this.tableData3 = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    handleCurrentChange(val) {
      this.val2 = val;
      GatherApi({
        currentPage: this.val2,
        pageSize: this.val1,
      }).then((res) => {
        // console.log(res);
        this.tableData3 = res.data.data.records;
      });
    },
    open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.del()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
  },
};
</script>

<style scoped lang="less">
.cont {
  .search {
    margin-left: 300px;
    input {
      height: 35px;
      width: 50%;
      padding-left: 30px;
      line-height: 35px;
      background-color: #f2fafe;
      border: none;
    }
    input::-webkit-input-placeholder {
      color: #acdbef;
    }
  }

  width: 100%;
  max-height: 2000px;
  background-color: #fff;
  margin-top: 20px;
  .top {
    margin: 20px 0 0 20px;
    display: flex;
    justify-content: flex-start;
    button {
      margin-right: 10px;
      width: 60px;
      height: 30px;
      border: 2px solid #008ecb;
      color: #008ecb;
      font-size: 12px;
      background-color: #fff;
    }
  }
  .box {
    display: flex;
    justify-content: space-around;
    .right {
      width: 45%;
      height: 400px;
    }
    .left {
      width: 45%;
    }
    .left::-webkit-scrollbar {
      display: none;
    }
  }
}
.gua,
.add {
  .left {
    input {
      height: 35px;
      width: 40%;
      padding-left: 30px;
      line-height: 35px;
      background-color: #f2fafe;
      border: none;
      margin-left: 50px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    input::-webkit-input-placeholder {
      color: #acdbef;
    }
    button {
      height: 35px;
      width: 60px;
      background-color: #008ecb;
      color: #fff;
      border: none;
    }
    .title {
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 10px;
    }
    .big {
      margin: 10px 0;
      border: 1px solid #e3e3e3;
      .tops {
        font-size: 12px;
        display: flex;
      }
      .center {
        font-size: 12px;
        display: flex;
        div {
          margin-right: 30px;
        }
      }
      .bottom {
        font-size: 12px;
        display: flex;
        div {
          margin-right: 23px;
        }
      }
    }
  }
  .right {
    div input{
      height: 35px;
      width: 50%;
      margin-top: 10px;
      padding-left: 30px;
      line-height: 35px;
      background-color: #f2fafe;
      border: none;
    }
    .title {
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 10px;
    }
    .show {
      margin-top: 10px;
      width: 100%;
      height: 100px;
      border: 2px dashed #e3e3e3;
      text-align: center;
      font-size: 20px;
      line-height: 100px;
    }
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}
</style>
